<template>
  <el-space :size="8" wrap>
    <template v-for="(item, index) in dataList">
      <div v-if="!readonly || modelValue == item.value" :class="{ 'select': modelValue == item.value }" class="dict-select-v2" @click="handleItemClick(item)">
        <div class="name">{{ item.label }}</div>
        <div v-if="modelValue == item.value" class="icon"></div>
        <SvgIcon v-if="modelValue == item.value" class="icon-item" icon="ep:check"/>
      </div>
    </template>
  </el-space>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { dictTypeMap } from '@/utils/global-dict.ts';
import { SvgIcon } from '@/components/icon';

const props = defineProps({
  modelValue: {
    required: true
  },
  dictType: {
    type: String,
    required: true
  },
  readonly: {
    type: Boolean,
    default: false
  },
  defaultKey: {
    type: [Number, String],
    default: undefined
  },
  disableKey: {
    type: [Number, String],
    default: undefined
  },
  hiddenKeys: {
    type: Array,
    default: () => []
  },
});

const dataList = computed(() => {
  return dictTypeMap[props.dictType] || []
});

const emit = defineEmits(['change', 'update:modelValue']);
const handleItemClick = (item: any) => {
  if (props.readonly) {
    return
  }
  if (item) {
    emit('update:modelValue', item.value);
    emit('change', item.value);
  }
};

</script>

<style lang="scss" scoped>
.dict-select-v2 {
  --el-card-border-color: var(--el-border-color-light);
  --el-card-border-radius: 4px;
  --el-card-bg-color: var(--el-fill-color-blank);

  min-width: 100px;
  padding: 1px 15px;
  border-radius: var(--el-card-border-radius);
  border: 1px solid var(--el-card-border-color);
  background-color: var(--el-card-bg-color);
  float: left;
  text-align: center;
  position: relative;
  cursor: pointer;

  .name {
    font-size: 13px;
    font-weight: 500;
    color: var(--el-text-color-primary);
  }

  .icon {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 26px solid var(--el-color-primary);
    border-left: 26px solid transparent;
  }

  .icon-item {
    position: absolute;
    bottom: 0;
    right: 1px;
    color: var(--el-bg-color);
  }
}

.dict-select-v2.select {
  border-color: var(--el-color-primary);
}
</style>
